<template>
  <div id="Center">
    <div class="content">
      <ul class="menu">
        <li v-for="(item, i) in menu" :key="i" :class="{active: menuIndex === i}" @click="menuClick(i)">{{item.name}}</li>
      </ul>
      <div class="viewBox">
        <personalDiv v-if="menuIndex===0"/>
        <messageDiv v-if="menuIndex===1"/>
        <collectDiv v-if="menuIndex===2"/>
        <questionDiv v-if="menuIndex===3"/>
        <aboutDiv v-if="menuIndex===4"/>
      </div>
    </div>
  </div>
</template>
<script>
import personalDiv from './personal'
import messageDiv from './message'
import collectDiv from './collect'
import questionDiv from './question'
import aboutDiv from './about'
export default {
  name: 'Center',
  components: {
    personalDiv,
    messageDiv,
    collectDiv,
    questionDiv,
    aboutDiv
  },
  data () {
    return {
      menuIndex: 0, // 默认开启菜单
      menu: [ // 子菜单
        { name: '个人信息' },
        { name: '消息中心' },
        { name: '我的收藏' },
        { name: '常见问题' },
        { name: '关于我们' }
      ]
    }
  },
  methods: {
    menuClick (i) { // 子菜单点击
      this.menuIndex = i
    }
  }
}
</script>
<style scoped lang="scss">
#Center{
  .content {
      // 菜单
      .menu {
        width: 100%;height: 54px;background: #fff;border: 1px solid rgba(229, 229, 229, 1);border-radius: 5px;display: table;overflow: hidden;border-bottom-left-radius: 0;border-bottom-right-radius: 0;
        li {
            text-align:center;display: table-cell;vertical-align: middle;border-left: solid rgb(229, 229, 229) 1px;font-size: 14px;color: #91959a;cursor: pointer;
        }
        li.active{
          color: #101d37;background-color: #fafafa
        }
        li:nth-child(1){
          border-left: none
        }
    }
    //显示区域
    .viewBox{
      padding: 10px;background-color: #fff;border: solid 1px rgba(229, 229, 229, 1);min-height: 100px;margin-top: 20px;border-radius: 4px
    }
  }
}
</style>
